<!--
 * @Description: 历史订单弹窗
-->
<template>
  <a-modal title="历史订单" :open="visible" :footer="null" @cancel="onClose" width="90vh">
    <!---------- 表格操作行 end ----------->
    <div class="table-wrapper">
      <a-table size="small" :dataSource="tableData" :columns="columns" rowKey="id" bordered :scroll="{ x: 'max-content' }" :pagination="false" :showSorterTooltip="false" :loading="tableLoading" />
    </div>

    <div class="smart-query-table-page query-table-page">
      <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS" :defaultPageSize="queryForm.limit" v-model:current="queryForm.page" v-model:pageSize="queryForm.limit" :total="total" @change="queryData" @showSizeChange="queryData" :show-total="() => `共${total}条`" />
    </div>
  </a-modal>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { purchaseOrderApi } from '@/api/business/orders/purchase-order-api'
import { useQuery } from '@/hooks/web/use-query-hook'
import { PAGE_SIZE_OPTIONS } from '@/constants/system/common-const'

// 是否展示抽屉
const visible = ref(false)
const historyData = ref({})
function showDrawer(val) {
  historyData.value = val
  visible.value = true
  queryData()
}

function onClose() {
  visible.value = false
}

// ---------------------------- 表格列 ----------------------------

const columns = computed(() => [
  {
    title: '单据编号',
    dataIndex: 'no'
  },
  {
    title: '供应商',
    dataIndex: 'name'
  },
  {
    title: '单位',
    dataIndex: 'unit_name'
  },
  {
    title: '数量',
    dataIndex: 'purchase_num'
  },
  {
    title: '采购价格',
    dataIndex: 'purchase_price'
  },
  {
    title: '备注',
    dataIndex: 'remark'
  },
  {
    title: '单据日期',
    dataIndex: 'create_time'
  }
])

// ---------------------------- 查询数据表单和方法 ----------------------------
const { queryForm, tableData, tableLoading, total, resetQuery, onSearch, queryData, deleteData } = useQuery({
  fetchDataApi: async (params) => {
    const data = {
      ...params,
      id: historyData.value.id,
      create_time: []
    }
    const res = await purchaseOrderApi.historyList(data)
    return {
      list: res.data.data,
      total: res.data.total
    }
  },
  queryFormFilter: {},
  queryFormOp: {}
})

defineExpose({
  showDrawer
})
</script>
